<template>
    <div class="userInfo">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row>
        <el-col :span="10" :offset="2">
          <el-form class="userInfo-container" ref="form" :model="user"  label-position="left" >
            <el-form-item>
              <h1>{{user.username}}</h1>
            </el-form-item>
            <el-form-item label="手机号码" >
              <el-input placeholder="请输入手机号码" v-model="user.phone" :disabled="isAble"></el-input>
            </el-form-item>
            <el-form-item label="身份证">
              <el-input placeholder="请输入身份证" v-model="user.idNumber" :disabled='false'></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input placeholder="请确定邮箱" v-model="user.email" :disabled='isAble'></el-input>
            </el-form-item>
            <el-form-item class="tabItem">
              <span class="title">给自己加个标签吧</span>
              <el-switch
                v-model="hasLabel"
                @change = "changeLabel"
                active-color="#6a86a8"
                inactive-color="#b6bbc1">
              </el-switch>
            </el-form-item>
            <div>
              <el-form-item v-for='(label,index) in labelList' :label='"标签"+(index+1)' :key="index">
                <el-col :span="10">
                  <el-input placeholder="请输入标签" v-model="label.label"></el-input>
                </el-col>
                <el-col class="operation-item" :span="4">
                  <i class="el-icon-remove-outline" @click="decreaseLable(index)" v-show="labelList.length > 1"></i>
                  <i class="el-icon-circle-plus-outline" v-show="index == labelList.length-1" @click="addLabel(index)"></i>
                </el-col>
              </el-form-item>
            </div>
            <el-form-item class="btn-container">
              <el-button class="btn_submit" @click="submitForm('form')">更新</el-button>
              <el-button class="btn_submit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          isAble: false,
          hasLabel: false,
          labelList: [],
          user: {}
        };
      },
      props: {
        'userInfo': {
          type: Object,
          required: true
        }
      },
      created() {
        this.getUserInfo();
//        this.user = {...this.userInfo};
//        this.labelList = [...this.user.labelList];
//        if (this.labelList.length > 0) {
//          this.hasLabel = true;
//        }
//        console.log(555);
      },
      methods: {
        getUserInfo() {
          this.$http.get('/api/host/user/getUserInfo.do')
            .then((response) => {
              let data = response.data;
              if (data.status === 0) {
                this.user = data.data;
                let list = data.data.labelList;
                if (list.length > 0) {
                  this.hasLabel = true;
                  list.forEach((item, index) => {
                    let temp = {};
                    temp.name = `标签${index + 1}`;
                    temp.label = item.label;
                    temp.id = item.id;
                    this.labelList.push(temp);
                  });
                }
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch((error) => {
              this.$message.error(error.msg);
            });
        },
        addLabel(index) {
          let label = {};
          let currentIndex = index + 2;
          label.name = `标签${currentIndex}`;
          label.label = '';
          label.id = '';
          this.labelList.push(label);
        },
        decreaseLable(index) {
          this.labelList.splice(index, 1);
        },
        changeLabel() {
          if (this.hasLabel) {
            let label = {
              name: '标签1',
              label: ''
            };
            this.labelList.push(label);
          } else {
            this.labelList = [];
          }
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let labelArray = [];
              if (this.labelList.length > 0) {
                this.labelList.forEach((lable) => {
                  labelArray.push(lable.label);
                });
                this.user.labels = labelArray.join(',');
              } else {
                console.log('labelList length >0');
                this.user.labels = '';
              }
              this.update();
            } else {
              return false;
            }
          });
        },
        update() {
          let requestParam = {};
          if (this.user.labels) {
            requestParam = {
              'phone': this.user.phone,
              'idNumber': this.user.idNumber,
              'email': this.user.email,
              'labels': this.user.labels
            };
          } else {
            requestParam = {
              'phone': this.user.phone,
              'idNumber': this.user.idNumber,
              'email': this.user.email
            };
          }
          console.log(requestParam);
          this.$http.post('/api/host/user/updateUser.do', this.$qs.stringify(requestParam))
            .then((response) => {
              var data = response.data;
              if (data.status === 0) {
                this.$message({
                  message: data.msg,
                  tpye: 'success',
                  duration: 1000
                });
              }
            })
            .catch((error) => {
              this.$message.error(error.msg);
            });
        }
      }
    };
</script>

<style scoped>
  .userInfo-container{
    margin-top: 60px;
    padding-right: 60px;
  }
  .userInfo-container h1{
    text-align: left;
    font-weight: 700;
    font-size: 30px;
  }
  .userInfo-container .el-form-item{
    margin-bottom: 18px;
  }
  .tabItem{
    text-align: left;
    margin-bottom: 40px;
  }
  .tabItem .title{
    margin-right: 10px;
  }
  .operation-item{
    font-size: 22px;
    text-align: left;
  }
  .operation-item i{
    margin-left: 10px;
    color: #6986a8;
  }
  .btn-container {
    margin-top: 60px;
  }
</style>
